let form = layui.form;
let layer = layui.layer;

// todo ==========获取文章类别的下拉框数据========
axios.get("/my/article/cates").then(({ data }) => {
    // console.log(data);
    //
    const newArr = data.data
        .map(
            ({ Id, name }) =>
                // value值设置对应的Id
                `<option value="${Id}">${name}</option>`
        )
        .join("");
    // console.log(newArr);

    // 把option内容放到下拉框中  html() 方法可以使用，但是在这使用的话，会把原本的内容给覆盖掉，可以使用append方法进行添加（不会有覆盖问题）
    // $("#cateSelect").append(newArr);
    $("select[name=cate_id]").append(newArr);

    //刷新select选择框渲染
    form.render("select");
});

// todo ========富文本编辑器效果
const E = window.wangEditor;
const editor = new E("#contentBox");
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 500; // 修改层级，避免挡住下拉框
editor.create();

// todo=========== 封面裁切效果
// 1. 获取裁剪区域的 DOM 元素
let $image = $(".container img");
// 2. 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview'
}
// 3. 初始化裁剪区域
$image.cropper(options)

// ? 选择封面的思路
//  1.点击文件选择框实现

// todo ============点击，选择封面按钮，显示供用户文件选择框的弹出层
$("#btnChooseCoverImage").on("click", function () {
    //  文件选择框id=fileCover 
    $("#fileCover").click()
})

//  ? 更换裁剪区域思路
//      1.给文件选择框注册 change 事件
//      2.获取供用户选择的文件属性，（借助files属性）
//          注意这里当用户未选中图片时，return掉。
//      3.需要把文件对象 转成 img 图片地址
//      4.更换裁剪区域：先销毁原来的，再添加新图片地址，然后重新渲染裁剪区域

// todo ========给文件域注册change 事件，更换裁剪区
$("#fileCover").on("change", function () {

    const file = this.files[0];
    // console.log(file);
    // 当用户未选中图片时，return掉。
    if (!file) {
        return layer.msg("请选择一张图片");
    }
    // 使用 createObjectURL 函数将file对象转换为 URL
    let imgStr = window.URL.createObjectURL(file);
    console.log(imgStr);
    // 先销毁原来的裁剪区域，destroy
    // 在添加新选择的 图片地址，attr
    // 最后重新渲染裁剪区域， options
    $image.cropper('destroy').attr("src", imgStr).cropper(options);
})

// todo =======发布或存储草稿功能
//   ?  发布或存储草稿功能的思路
//      1.给from 注册submit 事件 
//      2.阻止默认行为
//      3.收集表单数据（form.Data格式）
//          FormData收集不到的数据，用append追加
//      4.ajax请求数据(需要等所有数据都收集到，再发请求)

// ? 文章的状态的设置思路
// 1.给（发布、草稿）按钮，注册点击事件
// 2.声明个变量来存储状态数据
let state;
$("#btnPublish").on("click", function () {
    state = "已发布";
})
$("#btnSave").on("click", function () {
    state = "草稿";
})


// todo ======= 获取表单数据，ajax提交数据
// 1、
$("#form").on('submit', function (e) {
    // 2、
    e.preventDefault();
    // 3、
    // 接口要求 FormData格式收集数据
    // 基于 form 表单，快速创建一个 FormData 对象
    let fd = new FormData(this)   // 比写法 new FormData($(this)[0]) 好得多

    // FormData收集不到的数据，用append追加
    // 追加文章内容数据 属性是：content 
    // * 使用 editor.txt.html() 获取 html 
    fd.append("content", editor.txt.html());
    // *追加文章的状态数据
    fd.append("state", state);
    // console.log("状态", state);

    // 收集裁剪图片
    // 通过.toBlob()
    $image.cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
    }).toBlob(function (blob) {
        // console.log("收集blob:", blob);
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        // 5. 将文件对象，存储到 fd 中
        // * 追加图片数据
        fd.append('cover_img', blob);

        // (需要等所有数据都收集到，再发ajax 数据请求)
        // 6. 发起 ajax 数据请求
        axios.post("/my/article/add", fd)
            .then(res => {
                console.log(res)
                // 发布失败
                if (res.data.status !== 0) {
                    return layer.msg("发布失败");
                }
                // 发布成功
                console.log("发布成功");
                layer.msg(res.data.message,
                    {
                        icon: 1,
                        time: 2000
                    },
                    function () {
                        // return;
                        // 跳转列表页面
                        location.href = "/article/art_list.html"
                    });
            }).catch(err => {
                console.error(err);
            })
    });

    // 做个检测，可删除
    // 了解 通过forEach方法，遍历FormData收集到的数据
    // console.log(value, name));
    fd.forEach((name, value) => {
        console.log(value, name);
    });
});